<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			.width90{max-width:90px!important;height:90px!important;}
			.btnStyle button{width: 70px;height: 25px;color: #999999;font-size: 12px;line-height: 0px;}
			.btnStyleColor button{width: 70px;height: 25px;color: #5763FF;font-size: 12px;line-height: 0px;border: 1px #5763FF solid;}
			.total{color: #333333;}
			.total span{font-size: 16px;}
			.mui-slider-indicator.mui-segmented-control{background: #FFFFFF;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #5763FF;}
			.mui-media{background: #F9F9F9;}
		</style>
	</head>
	<body>
		<div id="headerNav"></div>
		<div class="mui-content">
		    <div class="mui-slider">
		        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		            <a class="mui-control-item mui-active" href="#item1">全部订单</a>
		            <a class="mui-control-item" href="#item2">待付款</a>
		            <a class="mui-control-item" href="#item3">待发货</a>
		            <a class="mui-control-item" href="#item4">待收货</a>
		            <a class="mui-control-item" href="#item5">已完成</a>
		        </div>
		        <div id="sliderProgressBar" class="mui-slider-progress-bar" style="width: 20%;background: #5763FF;"></div>
		        <div class="mui-slider-group">
		            <div id="item1" class="mui-slider-item mui-control-content mui-active">
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">已完成</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyle">
									<button class="mui-btn" id="delOrdBtn">删除订单</button>
									<button class="mui-btn">查看订单</button>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">已完成</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyle">
									<button class="mui-btn">删除订单</button>
									<button class="mui-btn">查看订单</button>
								</div>
							</li>
		                </ul>
		            </div>
		            <div id="item2" class="mui-slider-item mui-control-content">
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">待付款</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyleColor">
									<button class="mui-btn" id="canOrdBtn">取消订单</button>
								</div>
							</li>
		                </ul>
		            </div>
		             <div id="item3" class="mui-slider-item mui-control-content">
		                <ul class="mui-table-view">
		                   <li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">待发货</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyleColor">
									<button class="mui-btn">提醒发货</button>
								</div>
							</li>
		                </ul>
		            </div>
		            <div id="item4" class="mui-slider-item mui-control-content">
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">已发货</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyleColor">
									<button class="mui-btn">查看订单</button>
								</div>
							</li>
		                </ul>
		            </div>
		            <div id="item5" class="mui-slider-item mui-control-content">
		                <ul class="mui-table-view">
		                   <li class="mui-table-view-cell mui-media">
		                    	<p style="overflow: hidden;margin: 10px 0;"><span class="mui-pull-left" style="color: #333333;">2018-07-30</span><span class="mui-pull-right" style="color: #ED7700;font-size: 14px;">交易成功</span></p>
								<a>
									<img class="mui-media-object mui-pull-left width90" src="image/571244869097112057.png">
									<div class="mui-media-body">
										路上有花桃花酒 750ml
										<p class="mui-ellipsis" style="color: #999999;font-size: 14px;"><span>2个酒杯</span><span class="mui-pull-right">x1</span></p>
										<p class="mui-pull-right total" style="margin: 20px 0 0 0;">共<span>1</span>件商品 合计:<span>￥593</span></p>
									</div>
								</a>
								<div class="mui-btn-nav mui-pull-right btnStyleColor">
									<button class="mui-btn">删除订单</button>
								</div>
							</li>
		                </ul>
		            </div>
		        </div>
		    </div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html',function(){
			$('header h1').html('我的订单');
		});
		document.getElementById("delOrdBtn").addEventListener('tap', function() {
			var btnArray = ['取消', '确认'];
			mui.confirm('','确认删除订单吗？', btnArray, function(e) {
				if (e.index == 0) {
					
				} else {
					
				}
			})
		});
		document.getElementById("canOrdBtn").addEventListener('tap', function() {
			var btnArray = ['取消', '确认'];
			mui.confirm('','确认取消订单吗？', btnArray, function(e) {
				if (e.index == 0) {
					
				} else {
					
				}
			})
		});
	</script>	
</html>